<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" >
<h:body>
	<ui:composition template="/templates/master.xhtml">
		<ui:define name="content">
			<h:form id="paymentList">
			<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" >
				<p:effect type="fade" event="load" delay="1000" />
			</p:messages>  
			<p:panel id="panel" header="Payment List">
				<p:accordionPanel activeIndex="-1">
					<p:tab title="Advance Search" >  
						<h:panelGrid columns="4" cellpadding="5">
							<h:outputLabel for="member" value="Member:" />  
					    	<p:inputText id="member" value="#{membershipPaymentMB.paymentSearch.name}" />					
							<h:outputLabel for="package" value="Membership Package:" />  
					        <p:selectOneMenu value="#{membershipPaymentMB.paymentSearch.membershipPackage}" effect="fade" label="package" id="package">  
					            <f:selectItem itemLabel="Select One" itemValue="" />  
					            <f:selectItems value="#{membershipMB.allMemberships}" var="membership" itemLabel="#{membership.name}" itemValue="#{membership.name}"/>
					        </p:selectOneMenu> 								
						
							<h:outputLabel for="PaymentFrom" value="Date From - Payment:" />  
					    	<p:calendar id="PaymentFrom" value="#{membershipPaymentMB.paymentSearch.paymentFrom}" />					
							<h:outputLabel for="PaymentTo" value="Date To - Payment:" />  
					    	<p:calendar id="PaymentTo" value="#{membershipPaymentMB.paymentSearch.paymentTo}" />						
						
						</h:panelGrid>
						<p:commandButton value="Search" action="#{membershipPaymentMB.search}" update=":paymentList:paymentTable"/>						
					</p:tab>
				</p:accordionPanel>  
			
			    <p:dataTable id="paymentTable" var="payment" value="#{membershipPaymentMB.allMembershipPayment}" sortMode="multiple" rows="20" paginator="true">
			    
			        <p:column id="MemberCol" headerText="Member" >  
			            <h:outputText value="#{payment.member.name}" />  
			        </p:column>  
			        
			        <p:column id="MembershipCol" headerText="Membership Package" >  
			            <h:outputText value="#{payment.membership.name}" />  
			        </p:column>  			        
			  
			        <p:column id="AmountCol" headerText="Amount">  
			            <h:outputText value="#{payment.fee}" />  
			        </p:column>  
			        
			        <p:column id="DateCol" headerText="Date" parser="string">  
			            <h:outputText value="#{payment.paymentDate}" >  
			            	<f:convertDateTime pattern="dd MMM yyyy hh:mm" />
			            </h:outputText>
			        </p:column> 			        
			        
			        <p:column width="1%" headerText="Action">
			        	<p:commandButton id="ViewBtn" icon="ui-icon-document" update=":membershipPaymentViewForm" onclick="membershipPaymentViewWidget.show();" 
			        		process="@this" styleClass="list-button">
							<f:setPropertyActionListener target="#{membershipPaymentMB.membershipPayment}" value="#{payment}" />
						</p:commandButton>
						<p:tooltip for="ViewBtn" value="View Details" showEffect="fade" hideEffect="fade" />  
			        </p:column>
			    </p:dataTable> 



			</p:panel>
			</h:form>
			<ui:include src="/payment/membership/ViewMembershipPayment.xhtml" />
		</ui:define>
	</ui:composition>
</h:body>
</html>